<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import eventBus from 'vue3-eventbus' 

const messages = ref([
    // { type: 'system', content: '系统启动中...' },
    // { type: 'info', content: '服务器连接成功' },
    // { type: 'warning', content: '玩家 张三 加入游戏' },
    // { type: 'error', content: '连接断开，正在重连...' }
]);

const isVisible = ref(true);
const position = ref({ x: 400, y: 20 });
const isDragging = ref(false);
const dragOffset = ref({ x: 0, y: 0 });
const consoleMessagesRef = ref(null);
let timer = null;

const startDrag = (e) => {
    if (e.target.classList.contains('console-handle') || e.target.closest('.console-handle')) {
        isDragging.value = true;
        dragOffset.value = {
            x: e.clientX - position.value.x,
            y: e.clientY - position.value.y
        };
    }
};

const onDrag = (e) => {
    if (isDragging.value) {
        position.value = {
            x: e.clientX - dragOffset.value.x,
            y: e.clientY - dragOffset.value.y
        };
    }
};

const stopDrag = () => {
    isDragging.value = false;
};

// const handleKeyPress = (e) => {
//     if (e.key.toLowerCase() === 'd') {
//         clearTimeout(timer)
//         timer = null
//         isVisible.value = true

//         timer = setTimeout(() => {
//             isVisible.value = false
//         }, 5000)
//     }
// };

onMounted(() => {
    window.addEventListener('mousemove', onDrag);
    window.addEventListener('mouseup', stopDrag);
    // window.addEventListener('keydown', handleKeyPress);

    eventBus.on('add-player', addPlayer);
    eventBus.on('del-player', removePlayer);
    eventBus.on('cha-player', changePlayer);

    eventBus.on('socket-connected', connect);
    eventBus.on('socket-disconnected', connect);
    eventBus.emit('socket-reconnect', connect);

    setTimeout(() => {
            isVisible.value = false;
    }, 5000)
});

onUnmounted(() => {
    window.removeEventListener('mousemove', onDrag);
    window.removeEventListener('mouseup', stopDrag);
    // window.removeEventListener('keydown', handleKeyPress);
});

const scrollToBottom = () => {
    if (consoleMessagesRef.value) {
        setTimeout(() => {
            consoleMessagesRef.value.scrollTop = consoleMessagesRef.value.scrollHeight;
        }, 0);
    }
};

const addPlayer = ({ player_id, player_name, content, team }) => {
    messages.value.push({ 
        type: 'info',
         content: `
            【${new Date().toLocaleTimeString()}】添加新玩家：
            ${player_id}，${player_name}，${content}，${team}
        ` 
    });
    scrollToBottom();
};

const removePlayer = ({ player_id, player_name, content, team }) => {
    messages.value.push({ 
        type: 'warning', 
        content: `
            【${new Date().toLocaleTimeString()}】移除玩家
            ${player_id}，${player_name}，${team}
        ` 
    });
    scrollToBottom();
};

const changePlayer = ({ player_id, player_name, content, team }) => {
    messages.value.push({ 
        type: 'info', 
        content: `
            【${new Date().toLocaleTimeString()}】修改玩家
            ${player_id}，${player_name}，${content}，${team}
        ` 
    });
    scrollToBottom();
};

const connect = (message) => {
    messages.value.push({ type: 'system', content: message });
    scrollToBottom();
};
</script>

<!-- v-show="isVisible"  -->
<template>
    <div 
        v-show="isVisible"
        class="console-container"
        :style="{ 
            position: 'fixed',
            left: position.x + 'px',
            top: position.y + 'px',
            cursor: isDragging ? 'grabbing' : 'default'
        }">
        <div class="console-handle" 
             @mousedown="startDrag"
             :style="{ cursor: 'grab' }">
            <div class="handle-dots"></div>
        </div>
        <div class="console-header">
            <h3>消息打印</h3>
            <!-- <h6 style="color: yellow;">温馨提示：按 D 键展示结算界面</h6> -->
            <p>消息数：{{ messages.length }}</p>
        </div>
        <div class="console-messages" ref="consoleMessagesRef">
            <div v-for="(message, index) in messages" 
                 :key="index" 
                 :class="['message', message.type]">
                {{ message.content }}
            </div>
        </div>
    </div>
</template>

<style scoped>
.console-container {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #4a90e2;
    border-radius: 8px;
    width: 300px;
    height: 400px;
    display: flex;
    flex-direction: column;
    color: #fff;
    font-family: 'Consolas', monospace;
    z-index: 1000;
    user-select: none;
}

.console-handle {
    height: 20px;
    background: rgba(74, 144, 226, 0.2);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    border-bottom: 1px solid rgba(74, 144, 226, 0.3);
}

.handle-dots {
    width: 40px;
    height: 4px;
    background: #4a90e2;
    border-radius: 2px;
    position: relative;
}

.handle-dots::before,
.handle-dots::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #4a90e2;
    border-radius: 50%;
    top: 0;
}

.handle-dots::before {
    left: 8px;
}

.handle-dots::after {
    right: 8px;
}

.console-header {
    padding: 10px;
    border-bottom: 1px solid #4a90e2;
}

.console-header h3 {
    margin: 0 0 10px 0;
    color: #4a90e2;
    font-size: 16px;
}

.btn {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s ease;
}

.btn:hover {
    opacity: 0.8;
}

.add {
    background: #4CAF50;
    color: white;
}

.remove {
    background: #f44336;
    color: white;
}

.reconnect {
    background: #2196F3;
    color: white;
}

.console-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    font-size: 12px;
}

.message {
    margin-bottom: 5px;
    padding: 3px 5px;
    border-radius: 3px;
}

.system {
    color: #4a90e2;
}

.info {
    color: #4CAF50;
}

.warning {
    color: #FFC107;
}

.error {
    color: #f44336;
}

/* 自定义滚动条样式 */
.console-messages::-webkit-scrollbar {
    width: 8px;
}

.console-messages::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.console-messages::-webkit-scrollbar-thumb {
    background: #4a90e2;
    border-radius: 4px;
}

.console-messages::-webkit-scrollbar-thumb:hover {
    background: #357abd;
}
</style>